@page "/scrollable"

<Rows>
    <Markup Content="Scrollable component that adds ability to scroll through items and render limited count."
            Foreground="@Color.Grey70"/>
    <Markup Content="Source Code: Scrollable.razor"
            Foreground="@Color.DeepSkyBlue1" Decoration="@Decoration.Underline"
            link="@DocumentationUrl"/>
    <Newline/>

    <Rows>
        <Panel Title="Code" Border="BoxBorder.Rounded" Expand="true">
            <SyntaxHighlighter Language="razor"
                               Code="@_scrollableMarkup"
                               ShowLineNumbers="true"/>
        </Panel>
        <Rows>
            <Panel Title="Alphabet Table" Border="BoxBorder.Rounded" Expand="true">
                <Scrollable Items="@AlphabetData" PageSize="3">
                    <Rows>
                        <SpectreTable Title="Short alphabet" Border="TableBorder.Rounded" BorderColor="@_tableColor"
                                      @onfocus="OnFocusTable" @onfocusout="OnFocusOutTable" @onkeydown="context.KeyDownEventHandler">
                            <SpectreTHead>
                                <SpectreTR>
                                    <SpectreTH Align="Justify.Left">N</SpectreTH>
                                    <SpectreTH Align="Justify.Center">Letter</SpectreTH>
                                </SpectreTR>
                            </SpectreTHead>
                            <SpectreTBody >
                                @foreach (var item in context)
                                {
                                    <SpectreTR>
                                        <SpectreTD>
                                            <Markup Content="@item.Number.ToString()" Foreground="@item.Color"/>
                                        </SpectreTD>
                                        <SpectreTD>
                                            <Markup Content="@item.Letter" Foreground="@item.Color"/>
                                        </SpectreTD>
                                    </SpectreTR>
                                }
                            </SpectreTBody>
                        </SpectreTable>
                        <Markup Content=@($"Page: {context.CurrentOffset + 1} / {context.PagesCount}")/>
                    </Rows>
                </Scrollable>
            </Panel>

            <Panel Title="List (ol)" Border="BoxBorder.Rounded" BorderColor="@(!_isListFocused ? Color.White : Color.Aqua)" Expand="true">
                <Scrollable Items="@AlphabetData" PageSize="4">
                    <ol start="@(context.CurrentOffset + 1)"
                        @onfocus="OnFocusList" @onfocusout="OnFocusOutList" @onkeydown="context.KeyDownEventHandler">

                        @foreach (var item in context)
                        {
                            <li>
                                <Markup Content=@($"{item.Letter}") Foreground="@item.Color"/>
                            </li>
                        }
                    </ol>
                </Scrollable>
            </Panel>
        </Rows>
    </Rows>
</Rows>

@code {
    private const string DocumentationUrl = "https://github.com/LittleLittleCloud/RazorConsole/blob/main/src/RazorConsole.Core/Components/Scrollable.razor";
    private IReadOnlyList<(int Number, string Letter, Color Color)> AlphabetData => GetAlphabetData();
    private Color _tableColor = Color.White;
    private bool _isListFocused;

    private IReadOnlyList<(int Number, string Letter, Color Color)> GetAlphabetData()
    {
        return
        [
            (1, "A", Color.Yellow),
            (2, "B", Color.Red),
            (3, "C", Color.Aqua),
            (4, "D", Color.Orange1),
            (5, "E", Color.Chartreuse1),
            (6, "F", Color.Magenta1),
            (7, "G", Color.Green3),
            (8, "H", Color.Blue),
            (9, "I", Color.Purple),
            (10, "J", Color.Gold1),
            (11, "K", Color.Turquoise2),
            (12, "L", Color.HotPink),
            (13, "M", Color.Lime),
            (14, "N", Color.LightCoral),
            (15, "O", Color.SkyBlue1)
        ];
    }

    private void OnFocusTable(FocusEventArgs e)
    {
        _tableColor = Color.Aqua;
    }

    private void OnFocusOutTable(FocusEventArgs e)
    {
        _tableColor = Color.White;
    }

    private void OnFocusList(FocusEventArgs e)
    {
        _isListFocused = true;
    }

    private void OnFocusOutList(FocusEventArgs e)
    {
        _isListFocused = false;
    }


    private string _scrollableMarkup = @"
<Scrollable Items=""@AlphabetData"" PageSize=""3"">
    <Rows>
        <SpectreTable Title=""Short alphabet"" Border=""TableBorder.Rounded"" BorderColor=""@_tableColor""
             @onfocus=""OnFocusTable"" @onfocusout=""OnFocusOutTable"" @onkeydown=""context.KeyDownEventHandler"">
            <SpectreTBody>
                @foreach (var item in context)
                {
                    <SpectreTR>
                        <SpectreTD><Markup Content=""@item.Number"" Foreground=""@item.Color""/></SpectreTD>
                        <SpectreTD><Markup Content=""@item.Letter"" Foreground=""@item.Color""/></SpectreTD>
                    </SpectreTR>
                }
            </SpectreTBody>
        </SpectreTable>
        <Markup Content=""Page: {context.CurrentOffset + 1}/{context.PagesCount}""/>
    </Rows>
</Scrollable>

<Panel Title=""List (ol)"" Border=""BoxBorder.Rounded"" BorderColor=""@(!_isListFocused ? Color.White : Color.Aqua)"" Expand=""true"">
    <Scrollable Items=""@AlphabetData"" PageSize=""4"">
        //Use start attribute in ordered list to sync numeration with scrolling.
        <ol start=""@(context.CurrentOffset + 1)""
            @onfocus=""OnFocusList"" @onfocusout=""OnFocusOutList"" @onkeydown=""context.KeyDownEventHandler"">
            @foreach (var item in context)
            {
                <li><Markup Content=""{item.Letter}"" Foreground=""@item.Color""/></li>
            }
        </pl>
    </Scrollable>
</Panel>";
}
